<template>
	<view class="content display displayColumn">
		<u-navbar @rightClick="rightClick" :autoBack="true"  :placeholder="true">
			<template slot="left">
				<uni-icons type="left" color="#212121;" size="23"></uni-icons>
			</template>
			<template slot="center">
				<text class="fontSize font_comm title" >油卡明细</text>
			</template>
		</u-navbar>
		
		<view class="fn_content display width-100  displayColumn displaycenter_aliem">
			<view class="fn_all_one display  displayColumn M-T20" :style="{background : item.cardStatus == '可用' ? fn_all_one : '#9a9a9a'}">
				<view class="fn_one display  displaycenter_aliem M-T24">
					<span class="fn_txt1 M-L24">{{item.stationName}}加油卡</span>
					<span class="fn_txt2 M-R24">面值￥{{item.originPrice}}</span>
				</view>
				<view class="fn_two display  displaycenter_aliem width-100 M-T20" style="text-align: bottom;">
					<span class="wode1 M-L24">￥<span style="font-size: 52rpx;">{{item.balance}}</span></span>
					<!-- <span class="fn_mingxi" style="margin-left: 12rpx;">明细</span> -->
				</view>
				<view class="fn_three display  displaycenter_aliem width-100">
					<span class="fn_yue" style="margin-left: 24rpx;">余额</span>
					<button class="lijijiayou display all_item" style="margin-right: 24rpx;" v-if="item.cardStatus == '可用'" @click="sehnqingkuikuan">申请退款</button>
				</view>
			</view>
		</view>
	
		<!-- 明细 -->
		<view class="mingxi display  displayColumn width-100">
			<span class="wode_mingxi M-T24 M-L24">明细</span>
			<view class="fn_item display  displayColumn width-100 displaycenter_aliem M-T16" v-for="(item,index) in arr" :key="index">
				<view class="fn_item_one display  displayColumn">
					<view class="one_left_right display displaycenter_aliem width-100 M-T24">
						<span class="wode_one M-L24">{{item.createTime}}</span>
						<span class="wode_two M-R24">{{item.inExType == 1 ? "-" : (item.inExType == 0 ? "+" : "退款 ")}}{{item.useAmount}}￥</span>
					</view>
					<view class="display width-100 M-T16" style="justify-content: flex-end;">
						<span class="yueesd M-R24">余额：{{item.leftAmount}}</span>
					</view>
				</view>
			</view>
		</view>
		<u-popup :show="show" mode="center" :round="25" :safeAreaInsetBottom="false">
		            <view class="fn_popup display displayColumn all_item" style="border-radius: 25rpx;">
		                <span class="fn_txts1">退款提醒</span>
						<span class="fn_txtxs2" style="margin-top: 30rpx;text-align: center;">该加油卡已使用 所剩余额不足可申请退款</span>
						<button class="fn_btns display all_item" style="margin-top: 36rpx;">知道了</button>
		            </view>
		</u-popup>
		<u-popup :show="show1" mode="center" :round="25" :safeAreaInsetBottom="false">
			<view class="fn_popup display displayColumn all_item" style="border-radius: 25rpx;">
				<span class="fn_txts1">退款提醒</span>
				<span class="fn_txtxs2" style="margin-top: 30rpx;text-align: center;">该加油卡已使用 所剩余额不足可申请退款</span>
				<view class="display width-100">
				<button class="fn_btns1 display all_item" style="margin-top: 36rpx;" @click="refund()">申请退款</button>
				<button class="fn_btns display all_item" style="margin-top: 36rpx;" @click="show1 = false">考虑一下</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:false,
				show1:false,
				id:'',
				item:{},
				arr:[]
			}
		},
		onLoad(options) {
			this.item = JSON.parse(options.item)
			this.getdetails()
		},
		methods: {
			getdetails(){
				let data = {
					cardId: this.item.id,
					pageSize: 100,
					pageNum: 1
				}
				console.log(data)
				this.$req.get('/xcx/petrolCardLog/list', data).then(res=>{
					this.arr = res.data.rows;
				})
			},
			refund(){
				this.$modal.loading('退款中');
				this.show1 = !this.show1;
				let data = {
						id: this.item.id
				}
				this.$req.post(`/refund/petrolCard`, data).then(res => {
					this.$modal.closeLoading();
					if(res.data.code==200){
						this.$modal.msg("退款成功");
						this.infos = res.data.data;
					}else{
						this.$modal.msg(res.data.msg);
					}
				})
			},
			sehnqingkuikuan(){
				this.show1 = !this.show1;
			}
		}
	}
</script>

<style scoped lang="scss">
.title{
	font-weight: 600;
	font-size: 34rpx;
	color: #232323;
}
.fn_all_one{
	width: 690rpx;
	height: 226rpx;
	background: linear-gradient( 134deg, #459CF8 0%, #126BC9 100%);
	border-radius: 24rpx 24rpx 24rpx 24rpx;
}
.fn_one{
	justify-content: space-between;
}
.fn_txt1{
	font-weight: 600;
	font-size: 28rpx;
	color: #FFFFFF;
}
.fn_txt2{
	font-weight: 400;
	font-size: 28rpx;
	color: #FFFFFF;
}
.wode1{
	font-weight: 600;
	font-size: 28rpx;
	color: #FFFFFF;
}
.fn_mingxi{
	font-weight: 400;
	font-size: 24rpx;
	color: #FFFFFF;
}
.fn_yue{
	font-weight: 400;
	font-size: 24rpx;
	color: #FFFFFF;
}
.lijijiayou{
	// width: 136rpx;
	height: 54rpx;
	background: #FFFFFF;
	border-radius: 8rpx 8rpx 8rpx 8rpx;
	font-weight: 600;
	font-size: 24rpx;
	color: #126BC9;
	
}
.wode_mingxi{
	font-family: PingFang SC, PingFang SC;
	font-weight: 600;
	font-size: 32rpx;
	color: #000000;
}
.fn_item_one{
	width: 690rpx;
	height: 138rpx;
	background: #FFFFFF;
	border-radius: 24rpx 24rpx 24rpx 24rpx;
}
.one_left_right{
	justify-content: space-between;
}
.wode_one{
	font-weight: 400;
	font-size: 28rpx;
	color: #000000;
}
.wode_two{
	font-weight: 600;
	font-size: 28rpx;
	color: #FF672D;
}
.yueesd{
	justify-self: flex-end;
	font-weight: 400;
	font-size: 24rpx;
	color: #000000
}
.fn_popup{
	width: 630rpx;
	height: 366rpx;
	background: #FFFFFF;
	border-radius: 40rpx 40rpx 40rpx 40rpx;
}
.fn_txts1{
	font-weight: 600;
	font-size: 32rpx;
	color: #000000;
}
.fn_txtxs2{
	width: 396rpx;
	font-weight: 400;
	font-size: 28rpx;
	color: #7D7D7D;
}
.fn_btns{
	// width: 220rpx;
	height: 72rpx;
	background: #126BC9;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	font-weight: 600;
	font-size: 28rpx;
	color: #FFFFFF;
}
.fn_btns1{
	width: 220rpx;
	height: 72rpx;
	background: rgba(18,107,201,0.1);
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	font-weight: 400;
	font-size: 28rpx;
	color: #126BC9;
}
</style>
